<script setup lang="ts">
import type { FormInstance, UploadProps } from 'ant-design-vue';

import { reactive, ref } from 'vue';

import { MdiFile } from '@vben/icons';

import {
  Button,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  message,
  Modal,
  Select,
  Upload,
} from 'ant-design-vue';

const formRef = ref<FormInstance>();
const visible = ref<boolean>(false);
const selectedBrief = ref<string | undefined>(undefined);
const fileList = ref<any[]>([]);

const formValues = reactive<{
  file: File | undefined;
  project: string | undefined;
}>({
  file: undefined,
  project: undefined,
});

const formRules = {
  file: [{ required: true, message: '请上传KOL大纲文件' }],
  project: [{ required: true, message: '请选择Brief项目' }],
};

// Brief项目选项
const briefOptions = [
  { label: 'Brief项目1', value: 'brief1' },
  { label: 'Brief项目2', value: 'brief2' },
  { label: 'Brief项目3', value: 'brief3' },
];

// 文件上传配置
const uploadProps: UploadProps = {
  name: 'file',
  multiple: false,
  accept: '.pdf,.doc,.docx,.txt',
  beforeUpload: (file) => {
    const isValidSize = file.size / 1024 / 1024 < 100; // 限制10MB
    if (!isValidSize) {
      message.error('文件大小不能超过10MB');
    }
    return isValidSize;
  },
  onChange: (info) => {
    fileList.value = info.fileList;
  },
};

// 开始AI质检
const handleSubmit = async () => {
  await formRef.value?.validate();
};

defineExpose({
  open() {
    visible.value = true;
    // 重置表单
    selectedBrief.value = '';
    fileList.value = [];
  },
});
</script>

<template>
  <Modal
    v-model:open="visible"
    :mask-closable="false"
    :width="800"
    title="Brief质检"
  >
    <Form
      ref="formRef"
      :model="formValues"
      :rules="formRules"
      layout="vertical"
    >
      <!-- 描述信息 -->
      <div class="description">
        <p class="mb-6 text-gray-600">选择Brief项目，上传KOL大纲进行AI质检</p>
      </div>

      <!-- 选择Brief项目 -->
      <FormItem label="选择Brief项目" name="project">
        <Select
          v-model="selectedBrief"
          :options="briefOptions"
          class="w-full"
          placeholder="请选择需要质检的Brief项目"
          size="large"
        />
      </FormItem>

      <FormItem>
        <!-- 描述列表 -->
        <Descriptions
          :column="2"
          bordered
          class="mb-4"
          size="small"
          title="美妆教程视频项目"
        >
          <DescriptionsItem label="平台"> 抖音 </DescriptionsItem>
          <DescriptionsItem label="时间"> 2024年3月20日-30日 </DescriptionsItem>
          <DescriptionsItem label="关键词">
            美妆, 教程, 化妆, 变美
          </DescriptionsItem>
          <DescriptionsItem label="内容要求">
            美妆教程视频，展示产品使用效果
          </DescriptionsItem>
        </Descriptions>
      </FormItem>

      <!-- 上传KOL大纲文件 -->
      <FormItem label="上传KOL大纲文件" name="file">
        <Upload.Dragger
          v-bind="uploadProps"
          v-model:file-list="fileList"
          class="upload-dragger"
        >
          <MdiFile class="mx-auto block text-6xl text-gray-400" />
          <p class="mt-4 text-base font-medium">上传KOL提案的内容大纲</p>
          <p class="ant-upload-hint text-gray-500">选择文件</p>
        </Upload.Dragger>
        <div class="mt-2 text-xs text-gray-500">
          支持文件格式：PDF、DOC、DOCX、TXT，文件大小不超过100MB
        </div>
      </FormItem>
    </Form>

    <template #footer>
      <Button size="large" type="primary" @click="handleSubmit">
        开始AI质检
      </Button>
    </template>
  </Modal>
</template>
